<template>
  <view class="sign-page bg-white min-h-screen px-4 pt-4">
    <!-- 顶部标题 -->
    <view class="text-center text-lg font-bold mb-4">学习打卡</view>

    <!-- 功能icon区 -->
    <view class="flex justify-between mb-6">
      <view class="flex flex-col items-center flex-1">
        <image src="/static/images/book1.svg" class="icon-img mb-1" />
        <text class="text-xs text-gray-700">启蒙方法</text>
      </view>
      <view class="flex flex-col items-center flex-1">
        <image src="/static/images/book2.svg" class="icon-img mb-1" />
        <text class="text-xs text-gray-700">我的配音</text>
      </view>
      <view class="flex flex-col items-center flex-1">
        <image src="/static/images/book3.svg" class="icon-img mb-1" />
        <text class="text-xs text-gray-700">唐耳朵</text>
      </view>
    </view>

    <!-- 统计区 -->
    <view class="bg-white rounded-xl shadow-sm py-4 mb-4">
      <view class="text-center text-base font-bold mb-2">总阅读5天·6本</view>
      <view class="flex justify-around mb-4">
        <view class="flex flex-col items-center">
          <text class="text-xs text-gray-500 mb-1">今日阅读</text>
          <text class="text-xl font-bold">2</text>
          <text class="text-xs text-gray-500">本</text>
        </view>
        <view class="flex flex-col items-center">
          <text class="text-xs text-gray-500 mb-1">本周阅读</text>
          <text class="text-xl font-bold">2</text>
          <text class="text-xs text-gray-500">本</text>
        </view>
        <view class="flex flex-col items-center">
          <text class="text-xs text-gray-500 mb-1">本月阅读</text>
          <text class="text-xl font-bold">6</text>
          <text class="text-xs text-gray-500">本</text>
        </view>
      </view>
      <view class="flex justify-center">
        <button class="sign-btn">今日读了2本，打个卡</button>
      </view>
    </view>

    <!-- 打卡日历 -->
    <view class="flex items-center mb-2 text-gray-500 text-xs">
      <text>打卡日历</text>
      <view class="ml-auto flex items-center">
        <text>1天</text>
        <text class="ml-1">&gt;</text>
      </view>
    </view>
    <view class="flex justify-between items-center mb-4 calendar-row">
      <text class="calendar-dot">●</text>
      <text class="calendar-day">一</text>
      <text class="calendar-day">二</text>
      <text class="calendar-day">三</text>
      <text class="calendar-day">四</text>
      <text class="calendar-day">五</text>
      <text class="calendar-day active">六</text>
      <text class="calendar-day">七</text>
    </view>

    <!-- 底部tab切换 -->
    <view class="flex mb-2 border-b border-gray-200 tab-bottom-bar">
      <view
        v-for="tab in tabList"
        :key="tab.value"
        class="tab-bottom"
        :class="{ active: activeTab === tab.value }"
        @click="activeTab = tab.value"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- 打卡记录卡片区（根据activeTab切换内容） -->
    <view class="punch-list" v-if="activeTab === 'latest'">
      <view class="punch-card" v-for="item in punchList" :key="item.id"  @click="toDetail()">
        <view class="flex items-center mb-1">
          <view class="avatar" />
          <view class="ml-2 flex-1">
            <view class="font-bold text-base">{{ item.name }}</view>
            <view class="text-xs text-gray-500">打卡第{{ item.days }}天，读了{{ item.count }}本</view>
          </view>
          <view class="text-xs text-gray-400 mr-2">{{ item.time }}</view>
          <button class="follow-btn" v-if="!item.followed">+关注</button>
        </view>
        <view class="font-bold text-lg mb-1">今天读了{{ item.count }}本书</view>
        <view class="text-xs text-gray-500 mb-2">读了{{ item.count }}本</view>
        <view class="flex gap-2">
          <view v-for="book in item.books" :key="book.id" class="book-mini-card">
            <view v-if="book.cover" class="book-cover-img">
              <image :src="book.cover" mode="aspectFit" style="width:100%;height:100%;border-radius:10px;" />
            </view>
            <view v-else class="book-cover-img" :style="{background: book.color || '#eee'}">
              <view class="text-white text-xs font-bold px-1 pt-2">{{ book.title }}</view>
              <view class="text-2xl pt-2">{{ book.emoji || '' }}</view>
            </view>
            <view class="book-title">{{ book.title.length > 10 ? book.title.slice(0,10)+'...' : book.title }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="punch-list" v-else-if="activeTab === 'follow'">
      <view class="punch-card" v-for="item in followList" :key="item.id" @click="toDetail()">
        <view class="flex items-center mb-1">
          <view class="avatar" />
          <view class="ml-2 flex-1">
            <view class="font-bold text-base">{{ item.name }}</view>
            <view class="text-xs text-gray-500">打卡第{{ item.days }}天，读了{{ item.count }}本</view>
          </view>
          <view class="text-xs text-gray-400 mr-2">{{ item.time }}</view>
          <button class="follow-btn" v-if="!item.followed">+关注</button>
        </view>
        <view class="font-bold text-lg mb-1">今天读了{{ item.count }}本书</view>
        <view class="text-xs text-gray-500 mb-2">读了{{ item.count }}本</view>
        <view class="flex gap-2">
          <view v-for="book in item.books" :key="book.id" class="book-mini-card">
            <view v-if="book.cover" class="book-cover-img">
              <image :src="book.cover" mode="aspectFit" style="width:100%;height:100%;border-radius:10px;" />
            </view>
            <view v-else class="book-cover-img" :style="{background: book.color || '#eee'}">
              <view class="text-white text-xs font-bold px-1 pt-2">{{ book.title }}</view>
              <view class="text-2xl pt-2">{{ book.emoji || '' }}</view>
            </view>
            <view class="book-title">{{ book.title.length > 10 ? book.title.slice(0,10)+'...' : book.title }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="punch-list" v-else-if="activeTab === 'mine'">
      <view class="punch-card" v-for="item in mineList" :key="item.id" @click="toDetail()">
        <view class="flex items-center mb-1">
          <view class="avatar" />
          <view class="ml-2 flex-1">
            <view class="font-bold text-base">{{ item.name }}</view>
            <view class="text-xs text-gray-500">打卡第{{ item.days }}天，读了{{ item.count }}本</view>
          </view>
          <view class="text-xs text-gray-400 mr-2">{{ item.time }}</view>
          <button class="follow-btn" v-if="!item.followed">+关注</button>
        </view>
        <view class="font-bold text-lg mb-1">今天读了{{ item.count }}本书</view>
        <view class="text-xs text-gray-500 mb-2">读了{{ item.count }}本</view>
        <view class="flex gap-2" >
          <view v-for="book in item.books" :key="book.id" class="book-mini-card">
            <view v-if="book.cover" class="book-cover-img">
              <image :src="book.cover" mode="aspectFit" style="width:100%;height:100%;border-radius:10px;" />
            </view>
            <view v-else class="book-cover-img" :style="{background: book.color || '#eee'}">
              <view class="text-white text-xs font-bold px-1 pt-2">{{ book.title }}</view>
              <view class="text-2xl pt-2">{{ book.emoji || '' }}</view>
            </view>
            <view class="book-title">{{ book.title.length > 10 ? book.title.slice(0,10)+'...' : book.title }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const punchList = ref([
  {
    id: 1,
    avatar: '',
    name: '龙博',
    days: 146,
    count: 2,
    time: '1分钟前',
    followed: false,
    books: [
      { id: 1, title: 'Nobody Wanted to Play', cover: '', color: '#2ecc71', emoji: '😊' },
      { id: 2, title: 'A Cat in the Tree', cover: '/static/images/book1.svg' },
    ],
  },
  {
    id: 2,
    avatar: '',
    name: '小明',
    days: 23,
    count: 1,
    time: '3分钟前',
    followed: true,
    books: [
      { id: 1, title: 'The Big Red Dog', cover: '/static/images/book2.svg' },
    ],
  },
  {
    id: 3,
    avatar: '',
    name: '小红',
    days: 88,
    count: 3,
    time: '5分钟前',
    followed: false,
    books: [
      { id: 1, title: 'Happy Day', cover: '/static/images/book3.svg' },
      { id: 2, title: 'Blue Sky', cover: '', color: '#3498db', emoji: '☁️' },
      { id: 3, title: 'Green Grass', cover: '', color: '#27ae60', emoji: '🌱' },
    ],
  },
])

const followList = ref([
  {
    id: 4,
    avatar: '',
    name: '小刚',
    days: 12,
    count: 1,
    time: '2分钟前',
    followed: true,
    books: [
      { id: 1, title: 'Red Apple', cover: '/static/images/book1.svg' },
    ],
  },
  {
    id: 5,
    avatar: '',
    name: '小美',
    days: 34,
    count: 2,
    time: '4分钟前',
    followed: true,
    books: [
      { id: 1, title: 'Green Forest', cover: '', color: '#27ae60', emoji: '🌲' },
      { id: 2, title: 'Yellow Sun', cover: '', color: '#f1c40f', emoji: '🌞' },
    ],
  },
])

const mineList = ref([
  {
    id: 6,
    avatar: '',
    name: '我',
    days: 200,
    count: 2,
    time: '刚刚',
    followed: false,
    books: [
      { id: 1, title: 'My Book 1', cover: '/static/images/book2.svg' },
      { id: 2, title: 'My Book 2', cover: '/static/images/book3.svg' },
    ],
  },
])

const tabList = [
  { label: '最新', value: 'latest' },
  { label: '关注', value: 'follow' },
  { label: '我的', value: 'mine' },
]
const activeTab = ref('latest')


function toDetail() {
  uni.navigateTo({ url: '/pages-sub/punch-detail' })
}
</script>

<style scoped>
.sign-page {
  background: #f7f8fa;
}
.icon-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f6fa;
}
.sign-btn {
  background: linear-gradient(90deg, #6a8dff 0%, #8f6bff 100%);
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 36px;
  margin-top: 8px;
  box-shadow: 0 2px 8px 0 rgba(106,141,255,0.08);
}
.calendar-row {
  background: #f5f6fa;
  border-radius: 16px;
  padding: 8px 0;
}
.calendar-dot {
  color: #bdbdbd;
  font-size: 18px;
  margin-right: 8px;
}
.calendar-day {
  color: #bdbdbd;
  font-size: 15px;
  width: 28px;
  text-align: center;
  border-radius: 50%;
  line-height: 28px;
}
.calendar-day.active {
  background: #6a8dff;
  color: #fff;
}
.tab-bottom-bar {
  background: #f7f8fa;
}
.tab-bottom {
  flex: 1;
  text-align: center;
  padding: 16px 0 10px 0;
  font-size: 15px;
  color: #bdbdbd;
  border-bottom: 2px solid transparent;
  background: transparent;
  transition: background 0.2s, color 0.2s;
  font-weight: 500;
}
.tab-bottom.active {
  color: #5b8cff;
  border-bottom: 2px solid #5b8cff;
  font-weight: bold;
  background: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.punch-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.punch-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  padding: 16px 14px 14px 14px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #a5b4fc;
  display: inline-block;
}
.follow-btn {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  padding: 2px 12px;
  margin-left: 4px;
}
.book-mini-card {
  width: 80px;
  margin-right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.book-cover-img {
  width: 64px;
  height: 84px;
  border-radius: 10px;
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  overflow: hidden;
}
.book-title {
  font-size: 12px;
  color: #333;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 